<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="流程名称" prop="flowName">
        <el-input v-model="queryParams.flowName" placeholder="请输入流程名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd"
        v-hasPermi="['labdata:reservation:edit']">发起流程</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="reservationList" @selection-change="handleSelectionChange">
      <el-table-column label="编号" prop="instanceId" align="center" width="60" />
      <el-table-column label="流程名称" prop="flowName" :show-overflow-tooltip="true" />
      <el-table-column label="实验项目" align="center" prop="experimentalProject" width="100"
        :show-overflow-tooltip="true" />
      <el-table-column label="学院" align="center" prop="collegeOrgId" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{collegeFormat(scope.row.collegeOrgId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人员" prop="createBy" :show-overflow-tooltip="true" width="80" align="center" />
      <el-table-column label="发起时间" prop="createTime" width="150" align="center">
      </el-table-column>
      <el-table-column label="提交时间" prop="startTime" width="150" align="center">
      </el-table-column>
      <el-table-column label="执行步骤" prop="nodeName" align="center" width="100" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-if="scope.row.flowStatusOpt=='uncommitted'" v-hasPermi="['labdata:reservation:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-if="scope.row.flowStatusOpt=='uncommitted'" v-hasPermi="['labdata:reservation:edit']">删除</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetail(scope.row)"
            v-if="scope.row.flowStatusOpt!=='uncommitted'">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改实验室预约对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-tabs v-model="activeName">
        <el-tab-pane label="实验室预约流程表单" name="first"></el-tab-pane>
        <el-tab-pane label="流程导入" name="second" v-if="form.instanceId">
          <FlowChoose ref="workFlow" @workflow="setWorkflow" :id="form.workflowId" :businessType="form.businessTypeOpt"></FlowChoose>
        </el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" v-if="activeName=='first'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="流程创建" prop="flowCreation">
              <span class="flowStyle">{{form.flowCreation}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <div style="float:right">
              <el-button :class="showCopy?'dis_active':'active'" @click="showCopy=showCopy?false:true" type="text">任务抄送
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-form-item label="任务抄送" prop="copyToUsers" v-show="showCopy">
          <div class="purchase_s_view">
            <el-input v-model="choosedUserName" placeholder="抄送人员" style="width: 500px;" />
            <el-button type="primary" @click="selectUser" plain>选择用户</el-button>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="22">
            <el-form-item label="流程名称" prop="flowName" size="small">
              <el-input v-model="form.flowName" placeholder="请输入流程名称" class="form_long" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="学院" prop="collegeOrgId" size="small">
              <el-select v-model="form.collegeOrgId" placeholder="请选择学院" class="form_short" @change="handleLabChange">
                <el-option v-for="item in secondOrgList" :key="item.orgName" :label="item.orgName" :value="item.orgId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="实验室" prop="classRoomId" size="small">
              <el-select v-model="form.classRoomId" placeholder="请选择实验室" class="form_short" @change="refreshChoose">
                <el-option v-for="item in secondOrgLabList" :key="item.orgName" :label="item.orgName"
                  :value="item.orgId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="工位数" prop="totalSeats" size="small">
              <el-input v-model="form.totalSeats" placeholder="请输入工位数" class="form_short" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预约工位数" prop="reserveSeats" size="small">
              <el-input type="number" v-model="form.reserveSeats" placeholder="请输入工位数" class="form_short" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预约仪器" prop="instrumentDeviceId" size="small">
              <el-select v-model="form.instrumentDeviceId" placeholder="请选择预约仪器" class="form_short" @change="change2">
                <el-option v-for="item in instrumentationList" :key="item.name" :label="item.name"
                  :value="item.assetNo"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="预约班级">
                <el-input  size="small"  v-model="form.classNo"  placeholder="预约班级" class="form_short"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="预定时间">
              <el-input  size="small"  v-model="form.sksj"  placeholder="预定时间" class="form_long"/>
              <el-button @click="chooseSectionEvent" size="small">选择预定时间</el-button>
          </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="实验项目" prop="experimentalProject" size="small">
              <el-input v-model="form.experimentalProject" placeholder="请输入实验项目" class="form_long" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="实验方案">
              <UploadCom ref="upload" @submitData="submitData" description="" :userFileList="fileList"
                class="form_long" />
            </el-form-item>
          </el-row>
        <hr>
        <div class="form_title">
          <p>预约人员</p>
        </div>
        <div class="form_table">
          <el-table :data="form.appointmentList" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column label="工(学)号" min-width="60">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantNo" placeholder="工(学)号"
                  @change="changeAppointmentApplicantNo($event,scope.$index)"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="姓名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantName" placeholder="姓名" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="手机号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantPhone" placeholder="手机号" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="学院" min-width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantOrgName" placeholder="学院" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="班级">
              <template slot-scope="scope">
                <el-input style="width: 100%;" v-model="scope.row.applicantClassNo" value-format="yyyy-MM-dd"
                  placeholder="所属班级" disabled>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="安全学分" min-width="80">
              <template slot-scope="scope">
                <el-input style="width: 100%;" v-model="scope.row.applicantSafetyCredits" value-format="yyyy-MM-dd"
                  placeholder="安全学分" disabled>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="最近学习时间">
              <template slot-scope="scope">
                <el-input style="width: 100%;" v-model="scope.row.applicantLastUse" value-format="yyyy-MM-dd"
                  placeholder="最近学习时间" disabled>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" min-width="30">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="listingDelete(scope.$index)"
                  style="margin-top: 0px">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="table_button" @click="tableBtn">新增预约人员</el-button>
        </div>


        <!--参与人员 -->
        <hr>
        <div class="form_title">
          <p>参与人员</p>
        </div>
        <div class="form_table">
          <el-table :data="form.participationList" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }">
            <el-table-column label="工(学)号" min-width="60">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantNo" placeholder="工(学)号"
                  @change="changeParticipationApplicantNo($event,scope.$index)"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="姓名">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantName" placeholder="姓名" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="手机号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantPhone" placeholder="手机号" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="学院" min-width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.applicantOrgName" placeholder="学院" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column label="班级">
              <template slot-scope="scope">
                <el-input style="width: 100%;" v-model="scope.row.applicantClassNo" value-format="yyyy-MM-dd"
                  placeholder="所属班级" disabled>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="安全学分" min-width="80">
              <template slot-scope="scope">
                <el-input style="width: 100%;" v-model="scope.row.applicantSafetyCredits" value-format="yyyy-MM-dd"
                  placeholder="安全学分" disabled>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="最近学习时间">
              <template slot-scope="scope">
                <el-input style="width: 100%;" v-model="scope.row.applicantLastUse" value-format="yyyy-MM-dd"
                  placeholder="最近学习时间" disabled>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" min-width="30">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete"
                  @click="participationtListingDelete(scope.$index)" style="margin-top: 0px">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="table_button" size="mini" @click="participationtTableBtn">新增参与人员</el-button>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="activeName=='first'" v-hasPermi="['labdata:reservation:edit']">保存</el-button>
        <el-button type="primary" @click="submitWorkflow" v-if="activeName=='second'" v-hasPermi="['labdata:reservation:edit']">提交</el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>


   <ChooseUser @chooseUsers="getUser" ref="checkedUserCom"></ChooseUser>
    <ReservationDetail ref="previewCom" />
    <ChooseSection ref="chooseSection" @chooseResult="chooseResult"/>
  </div>
</template>

<script>
  import { commitReservation, listReservation, getReservation, delReservation, addReservation, updateReservation, exportReservation } from "@/api/labdata/reservation";
  import { searchEmployee, getEmployeeInfo } from "@/api/labdata/employee";
  import { formatCurrentDate } from "@/utils/index";
  import { listOrgnization } from "@/api/labdata/orgnization";
 // import { getUserProfile } from "@/api/system/user";
  //import { treeselect } from "@/api/labdata/orgnization";
  import ReservationDetail from "@/views/labdata/reservation/reservationDetail.vue";
  import UploadCom from "@/views/labdata/commons/upload.vue";
  //import Treeselect from "@riophae/vue-treeselect";
  //import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import FlowChoose from '@/views/labdata/flowDefination/flow_choose.vue'
  import ChooseUser from "@/views/labdata/employee/user_choose_com.vue";
  import { getOrgByFunctionOpt, listSecondOrgLab } from "@/api/labdata/orgnization";
  import { listOrgThird, getOrgThird, delOrgThird, addOrgThird, updateOrgThird, exportOrgThird } from "@/api/labdata/orgThird";
  import { listInstrumentation, getInstrumentation } from "@/api/labbase/instrumentation";
  import ChooseSection from "@/views/labdata/labReservation/choose_section.vue";
  export default {
    name: "ReservationComponent",
    components: { UploadCom, ReservationDetail, FlowChoose, ChooseUser,ChooseSection },
    data() {
      return {
        weekDayOptOptions: [],
        //二级机构
        secondOrgList: [],
        //二级机构下的实验室
        secondOrgLabList: [],
        // 实验室仪器列表
        instrumentationList: [],
        checkedUserList: [],
        choosedUserName: '',
        // 流程状态字典
        flowStatusOptOptions: [],
        showCopy: false,
        activeName: "first",
        // 部门树选项
        deptOptions: [],
        //用户对象
        user: {},
        // 表格树数据
        deptList: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 实验室预约表格数据
        reservationList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 设置黑名单弹出层标题
        handTitle: "",
        // 设置黑名单是否显示弹出层
        handOpen: false,
        // 预约id
        globalReservationId: "",
        // 黑名单表单参数
        handForm: {
          blacklistId: null,
          reservationId: null,
          classRoomId: null,
          experimentalProject: null,
          violationInfo: null,
          violationPersonnelId: null,
          comments: null,
          violationTime: null,
          judgeTeacher: null,
          // 预约人员
          labBlackPersonnelAppointmentVos: [],
          // 参与人员
          labBlackPersonnelParticipationVos: [],
        },

        // 项目类型字典
        labProjectOptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          flowName: null,
          collegeOrgId: null
        },
        //附件集合
        fileList: [],
        // 黑名单附件集合
        handFileList: [],

        listDisabled: false,
        // 表单参数
        form: {
          //预约人员
          appointmentList: [],
          //参与人员
          participationList: []

        },
        // 表单校验
        rules: {
          flowName: [
            { required: true, message: "流程名称不能为空", trigger: "blur" }
          ],
          collegeOrgId: [
            { required: true, message: "预约学院不能为空", trigger: "blur" }
          ],
          reserveSeats: [
            { required: true, message: "预约工位数不能为空", trigger: "blur" }
          ],
          // instrumentDeviceId: [
          //   { required: true, message: "预约仪器不能为空", trigger: "blur" }
          // ],
          experimentalProject: [
            { required: true, message: "实验项目不能为空", trigger: "blur" }
          ],
          classRoomId: [
            { required: true, message: "实验室不能为空", trigger: "blur" }
          ],
          sectionStart: [
            { required: true, message: "开始节次不能为空", trigger: "blur" }
          ],
          sectionEnd: [
            { required: true, message: "结束节次不能为空", trigger: "blur" }
          ],
          weekDayOpt: [
            { required: true, message: "星期不能为空", trigger: "blur" }
          ],
          flowCreation: [
            { required: true, message: "流程创建不能为空", trigger: "blur" }
          ],
          weekStart: [
            { required: true, message: "周次开始不能为空", trigger: "blur" }
          ],
          weekEnd: [
            { required: true, message: "周次结束不能为空", trigger: "blur" }
          ],
        },
        // 黑名单表单检验
        handRules: {
          // classRoomId: [
          //   { required: true, message: "违规地点名称不能为空", trigger: "blur" }
          // ],
          violationTime: [
            { required: true, message: "违规时间不能为空", trigger: "blur" }
          ],
          experimentalProject: [
            { required: true, message: "实验项目不能为空", trigger: "blur" }
          ],
          violationInfo: [
            { required: true, message: "违反规定不能为空", trigger: "blur" }
          ],
          judgeTeacherId: [
            { required: true, message: "判定老师不能为空", trigger: "blur" }
          ]

        }
      };
    },
    watch: {
      checkedUserList: function (val) {
        this.choosedUserName = '';
        this.form.copyToUsers = '';
        val.forEach((item, index) => {
          if (index > 0) {
            this.choosedUserName += ",";
            this.form.copyToUsers += ",";
          }
          this.choosedUserName += item.nickName;
          this.form.copyToUsers += item.userId;
        })
      },
    },
    created() {
      this.getList();
      //this.getDeptList();
      //this.getUserInfo();
      //this.getTreeselect();
      this.getDicts("labProjectOpt").then(response => {
        this.labProjectOptOptions = response.data;
      });
      this.getDicts("flowStatusOpt ").then(response => {
        this.flowStatusOptOptions = response.data;
      });
      getOrgByFunctionOpt(2).then(response => {
        this.secondOrgList = response.data;
      });
      // 星期
      this.getDicts("weekDayOpt").then(response => {
          this.weekDayOptOptions = response.data;
      });

    },

    methods: {
      refresh(){
        this.getList();
      },
      chooseSectionEvent(){
        if(!this.form.classRoomId){
          this.msgError('请先选择实验室');
          return;
        }
        this.$refs.chooseSection.open = true;
        this.$refs.chooseSection.labName = this.form.labName;
        this.$refs.chooseSection.queryParams.classRoomId = this.form.classRoomId;
        var checkedRowList = []
        var checkedDataList = []
        if (this.form.chooseData) {
          checkedDataList = JSON.parse(this.form.chooseData)
          for (const item of checkedDataList) {
            checkedRowList[item.holidayDate] = item
          }
        }
        this.$refs.chooseSection.checkedRowList = checkedRowList;
        this.$refs.chooseSection.checkedDataList = checkedDataList;
        this.$refs.chooseSection.getList();
      },
      chooseResult(chooseItem, chooseData){
        console.info(chooseItem);
        this.form.sksj = chooseItem;
        this.form.chooseData = chooseData;
        this.$forceUpdate();
      },
      getUser(e) {
        //console.log(JSON.stringify(e));
        this.checkedUserList = e;
      },
      selectUser() {
        if (this.checkedUserList && this.checkedUserList.length > 0) {
          this.$refs["checkedUserCom"].handleAdd(this.checkedUserList);
        } else {
          this.$refs["checkedUserCom"].handleAdd();
        }
      },
      setWorkflow(workflowId) {
        this.form.workflowId = workflowId;
        //console.log('workflow='+workflowId);
      },
      submitWorkflow() {
		if(!this.form.workflowId){
		  this.form.workflowId = this.$refs["workFlow"].getWorkflowId();
		}
        this.form.createBy = this.$store.state.user.name;
        commitReservation(this.form).then((response) => {
          this.msgSuccess("提交成功");
          this.open = false;
          this.getList();
        });
      },


      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      //查询当前用户信息
      /* getUserInfo() {
        getUserProfile().then(response => {
          this.user = response.data;
        });
      }, */
      /** 查询部门列表 */
      getDeptList() {
        this.loading = true;
        this.queryParams = {}
        listOrgnization(this.queryParams).then(response => {
          this.deptList = response.rows;
        });
      },
      searchUser() {
        // console.log(this.form.projectOwnerId);
        if (!this.form.projectOwnerId) {
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
        searchEmployee(this.form.projectOwnerId).then(response => {
          let searchResult = response.data;
          if (searchResult) {
            this.form.projectLeader = searchResult.nickName;
            this.form.ownerTitle = searchResult.title
          } else {
            this.form.projectLeader = null;
            this.form.ownerTitle = null;
          }
          //强制刷新
          this.$forceUpdate();
        });
      },

      /** 查询实验室预约申请列表 */
      getList() {
        this.loading = true;
        listReservation(this.queryParams).then(response => {
          this.reservationList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 项目类型字典翻译
      labProjectOptFormat(row, column) {
        return this.selectDictLabel(this.labProjectOptOptions, row.labProjectOpt);
      },
      // 取消按钮
      cancel() {
        this.showCopy = false;
        this.open = false;
        this.reset();
        this.getList();
      },
      // 取消按钮
      handCancel() {
        // this.showCopy = false;
        this.handOpen = false;
        this.handReset();
      },
      // 表单重置
      handReset() {
        this.handForm = {
          blacklistId: null,
          reservationId: null,
          classRoomId: null,
          experimentalProject: null,
          violationInfo: null,
          violationPersonnelId: null,
          comments: null,
          violationTime: null,
          judgeTeacherId: null,
          // 预约人员
          labBlackPersonnelAppointmentVos: [],
          // 参与人员
          labBlackPersonnelParticipationVos: [],

        };
        this.handFileList = [];
        this.resetForm("handForm");
      },
      // 表单重置
      reset() {
        this.form = {
          flowCreation: formatCurrentDate() + this.$store.state.user.nickName + "创建",
          instanceId: null,
          createTime: null,
          createUserId: null,
          flowName: null,
          labProjectOpt: null,
          projectName: null,
          departmentOrgId: null,
          budgetFunds: null,
          projectOwnerId: null,
          contactPhone: null,
          comments: null,
          projectStart: null,
          projectEnd: null,
          title: null,
          ownerEmail: null,
          imageFileId: null,
          //预约人员
          appointmentList: [],
          //参与人员
          participationList: []

        };
        this.activeName = 'first';
        this.fileList = [];
        this.checkedUserList = [];
        this.resetForm("form");
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.instanceId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.form.createBy = this.$store.state.user.name;
        let employeeNo = this.$store.state.user.name;
        this.open = true;
        this.title = "添加实验室预约";
        getEmployeeInfo(employeeNo).then(response => {
          this.reset();
          this.form.appointmentList = response.data.appointmentList;
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const instanceId = row.instanceId || this.ids
        getReservation(instanceId).then(response => {
          this.form = response.data;
          for (let key in this.form.appointmentList) {
            this.form.appointmentList[key].applicantOrgName = this.departmentOrgIdFormat(this.form.appointmentList[key].applicantOrgId)
          }
          for (let key in this.form.participationList) {
            this.form.participationList[key].applicantOrgName = this.departmentOrgIdFormat(this.form.participationList[key].applicantOrgId)
          }
          this.fileList = this.form.images;
          if (this.form.copyToUsers != null) {
            this.showCopy = true;
            getCheckedList({
              checkedUserIds: this.form.copyToUsers
            }).then(res => {
              this.checkedUserList = res.data;
            });
          }
          listSecondOrgLab(this.form.collegeOrgId).then(response => {
            this.secondOrgLabList = response.data;
            this.$forceUpdate();
          });
          getOrgThird(this.form.classRoomId).then(response => {
            this.form.totalSeats = response.data == undefined ? 0 : response.data.tableNums;
            this.$forceUpdate();
          });
          let params = {
            labId: this.form.classRoomId
          };
          listInstrumentation(params).then(response => {
            this.instrumentationList = response.rows;
            this.$forceUpdate();
          });
          this.open = true;
          this.searchUser();
          this.title = "修改实验室预约";
        });
      },

      /**查看 */
      handleDetail(row) {
        this.$refs['previewCom'].handleUpdate(row);
      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (this.form.totalSeats < this.form.reserveSeats) {
            this.msgError("预约工位数不能大于实验室工位总数");
            return;
          }
          if (this.form.sectionEnd > 12) {
            this.msgError("结束节次最大为12");
            return;
          }
          if (this.form.sectionEnd < this.form.sectionStart) {
            this.msgError("开始节次不能大于结束节次");
            return;
          }
          if (valid) {
            this.$refs["upload"].doSubmit();
          }
        });
      },

      /** 提交按钮 */
      submitData(fileList) {
        this.form.images = fileList;
        this.form.createBy = this.$store.state.user.name;
        if (this.form.instanceId != null) {
          updateReservation(this.form).then(response => {
            this.msgSuccess("修改成功");
            this.form = response.data;
            this.fileList = this.form.images;
            this.$forceUpdate();
            this.activeName="second";
            // this.open = false;
            this.getList();
          });
        } else {
          addReservation(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.form = response.data;
            this.fileList = this.form.images;
            // this.open = false;
            this.getList();
            this.activeName="second";
          });
        }

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const instanceIds = row.instanceId || this.ids;
        this.$confirm('是否确认删除实验室预约申请编号为"' + instanceIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delReservation(instanceIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
      },
      // 流程状态字典翻译
      flowStatusOptFormat(row, column) {
        return this.selectDictLabel(this.flowStatusOptOptions, row.flowStatusOpt);
      },
      //新增预约清单
      tableBtn() {
        let obj = {};
        obj.applicantNo = "";
        obj.applicantPhone = "";
        obj.applicantOrgId = null;
        obj.applicantSafetyCredits = "";
        obj.applicantName = "";
        obj.applicantClassNo = "";
        obj.applicantLastUse = "";
        obj.type = "0";
        obj.applicantId = "";
        this.form.appointmentList.push(obj);
      },
      //删除当前行费用清单
      listingDelete(index) {
        this.form.appointmentList.splice(index, 1);

      },

      //新增参与人员清单
      participationtTableBtn() {
        let obj = {};
        obj.applicantNo = "";
        obj.applicantPhone = "";
        obj.applicantOrgId = null;
        obj.applicantSafetyCredits = "";
        obj.applicantName = "";
        obj.applicantClassNo = "";
        obj.applicantLastUse = "";
        obj.type = "1";
        obj.applicantId = "";
        this.form.participationList.push(obj);
      },
      //删除当前行费用清单
      participationtListingDelete(index) {
        this.form.participationList.splice(index, 1);
      },

      /** 设置黑名单操作 */
      async setHandlist(row) {
        this.handReset();
        const instanceId = row.instanceId || this.ids
        this.globalReservationId = row.instanceId;
        await getBlacklist(instanceId).then(response => {
          this.handForm = response.data;
          this.handForm.judgeTeacher = this.$store.state.user.nickName;
          this.handFileList = this.handForm.images;
        });
        await getReservation(instanceId).then(response => {
          this.handForm.classRoomId = this.handForm.classRoomId == null ? response.data.classRoomId : this.handForm.classRoomId;
          this.handForm.experimentalProject = this.handForm.experimentalProject == null ? response.data.experimentalProject : this.handForm.experimentalProject;
          this.handleLabChange(response.data.collegeOrgId);
        }),
          this.$forceUpdate();
        this.handOpen = true;
        this.handTitle = "设置黑名单";
      },


      /** 提交按钮 */
      handSubmitForm() {
        this.$refs["handForm"].validate(valid => {
          if (valid) {
            this.$refs["handUpload"].doSubmit();
          }
        });
      },

      /** 提交按钮 */
      handSubmitData(handFileList) {
        this.handForm.images = handFileList;
        if (this.handForm.blacklistId != null) {
          updateBlacklist(this.handForm).then(response => {
            this.msgSuccess("黑名单修改成功");
            // this.$forceUpdate();
            this.handOpen = false;

          });
        } else {
          this.handForm.reservationId = this.globalReservationId;
          addBlacklist(this.handForm).then(response => {
            this.msgSuccess("黑名单设置成功");
            this.handOpen = false;
          });
        }

      },

      changeAppointmentApplicantNo(event, index) {
        getEmployeeInfo(event).then(response => {
          this.form.appointmentList[index].applicantName = response.data.appointmentList[0].applicantName
          this.form.appointmentList[index].applicantOrgId = response.data.appointmentList[0].applicantOrgId
          this.form.appointmentList[index].applicantOrgName = this.departmentOrgIdFormat(response.data.appointmentList[0].applicantOrgId)
          this.form.appointmentList[index].applicantPhone = response.data.appointmentList[0].applicantPhone
          this.form.appointmentList[index].applicantId = response.data.appointmentList[0].applicantId
        });

      },

      changeParticipationApplicantNo(event, index) {
        getEmployeeInfo(event).then(response => {
          this.form.participationList[index].applicantName = response.data.appointmentList[0].applicantName
          this.form.participationList[index].applicantOrgId = response.data.appointmentList[0].applicantOrgId
          this.form.participationList[index].applicantOrgName = this.departmentOrgIdFormat(response.data.appointmentList[0].applicantOrgId)
          this.form.participationList[index].applicantPhone = response.data.appointmentList[0].applicantPhone
          this.form.participationList[index].applicantId = response.data.appointmentList[0].applicantId
        });
      },

      handleLabChange(item) {
        if (item) {
          this.form.classRoomId = null;
          this.form.instrumentDeviceId = null;
          this.form.totalSeats = null;
          listSecondOrgLab(item).then(response => {
            this.secondOrgLabList = response.data;
          });
        }
      },

      refreshChoose(item) {
        if (item) {
          this.form.instrumentDeviceId = null;
          this.secondOrgLabList.forEach(element=>{
            if(element.orgId==item){
              this.form.labName = element.orgName;
            }
          });
          this.form.totalSeats = null;
          getOrgThird(item).then(response => {
            this.form.totalSeats = response.data == undefined ? 0 : response.data.tableNums;
            this.$forceUpdate();
          });
          let params = {
            labId: item
          };
          listInstrumentation(params).then(response => {
            this.instrumentationList = response.rows;
          });
          this.$forceUpdate();
        }
      },
      change2() {
        this.$forceUpdate();
      },
      collegeFormat(value) {
        var datas = this.secondOrgList
        for (let key in datas) {
          if (datas[key].orgId == value) {
            return datas[key].orgName;
          }
        }
        return "";
      },

      // 实验室匹配
      classRoomIdFormat(value) {
        let datas = this.secondOrgLabList
        for (let key in datas) {
          if (datas[key].orgId == value) {
            return datas[key].orgName;
          }
        }
        return "";
      },
      // 所在部门字典翻译
      departmentOrgIdFormat(value) {
        var datas = this.deptList
        for (let key in datas) {
          if (datas[key].orgId == value) {
            return datas[key].orgName;
          }
        }
        return "";
      },
    }
  };
</script>
<style type="text/css" scoped lang="scss">
  .form_long {
    width: 596px;
  }

  .form_short {
    width: 200px;
  }

  /deep/ .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  /deep/ .el-button.dis_active {
    color: #999999
  }

  .select_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    //align-items: center;
  }

  .table_button {
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }

  /deep/ .el-dialog__body {
    padding: 0px 20px;
  }

  /deep/ .el-table__row .el-input--medium .el-input__inner {
    font-size: 10px;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
  }
</style>
